#parse('/user/head.html')

<div class="header">
	#if($message)
	<div id="messageBox" class="alert alert-error">
		<label id="loginError" class="error">$message</label>
	</div>
	#end
</div>
#if($success)
<script>
	setTimeout(function(){
		location.href = "/";
	}, 2000);
</script>
#else
<h1 class="form-signin-heading icon-wink">$lang.get('user.register')</h1>
<form id="loginForm" class="form-signin form-signon form-horizontal" action="/user/register" method="post">
	<div class='form-group'>
		<label class="col-sm-4 text-center input-label icon-user" for="username">$lang.get('user.name')<r>*</r></label>
		<div class="col-sm-8">
			<input type="text" id="username" name="name" value="$!name" class="form-control" required onblur="verify(this, '/user/verify');"/>
		</div>
	</div>
	<div class='form-group'>
		<label class="col-sm-4 text-center input-label icon-shield" for="nickname">$lang.get('user.nickname')<r>*</r></label>
		<div class="col-sm-8">
			<input type="text" id="nickname" name="nickname" value="$!nickname" class="form-control" required />
		</div>
	</div>
	<div class='form-group'>
		<label class="col-sm-4 text-center input-label icon-mail2" for="email">$lang.get('user.email')</label>
		<div class="col-sm-8">
			<input type="email" id="email" name="email" value="$!email" class="form-control" />
		</div>
	</div>
	<div class='form-group'>
		<label class="col-sm-4 text-center input-label icon-mobile" for="phone">$lang.get('user.phone')</label>
		<div class="col-sm-8">
			<input type="tel" id="phone" name="phone" value="$!phone" class="form-control" />
		</div>
	</div>
	
	<div class='form-group'>
		<label class="col-sm-4 text-center input-label icon-lock" for="password">$lang.get('user.password')<r>*</r></label>
		<div class="col-sm-8">
			<input type="text" style="display:none"/>
			<input type="password" id="password" name="password" value="$!password" class="form-control" required onblur="verify(this, '/user/verify');"/>
		</div>
	</div>
	
	#if($global.getInt('user.captcha', 1) == 1)
	<div class="validateCode">
		<label class="input-label col-sm-4 text-center" for="validateCode">$lang.get('user.captcha')<r>*</r></label>
		<input type="text" id="validateCode" name="code" maxlength="5" required class="form-control">
		<img id="validateImg" src="" onclick="_oncaptcha();" class="mid validateCode" style="">
		<a href="javascript:" onclick="_oncaptcha();" class="icon-opera validateCodeRefresh " style=""></a>
		<script>
			function _oncaptcha() {
				$.get('/captcha', {}, function(d) {
					if (d.state == 200) {
						$('#validateImg').attr('src', d.uri);
					}
				})
			}
			$(function(){
				_oncaptcha();
			})
		</script>
	</div>
	#end
	
	<button class="col-sm-offset-4 col-sm-8 btn btn-large btn-primary" type="submit">$lang.get('btn.register')</button>
	<div id="themeSwitch">
		<a class="icon-wink" href="/user/login">$lang.get('a.user.login')</a>
	</div>
</form>
<div class="footer">
	$lang.get('copyright') - $lang.get('powerby') 
</div>

<script>
function verify(obj, url) {
	var that = $(obj);
	$.post(url, {
				name : that.attr('name'),
				value : that.val()
			}, function(d) {
				if (d.state == 200) {
					/**
					 * ok, good
					 */
					that.attr('bad', "0");
					if (d.value) {
						that.val(d.value);
					}
					that.removeClass('bad').addClass('good');
					that.parent().parent().find('.note').hide();
				} else if (d.state == 400) {
					/**
					 * need confirm
					 */
					if (confirm(d.message)) {
						that.attr('bad', "0");
						if (d.value) {
							that.val(d.value);
						}
						that.removeClass('bad').addClass('good');
						that.parent().parent().find('.note').hide();
					} else {
						that.attr('bad', "1");
						that.removeClass('good').addClass('bad');
						var note = that.parent().parent().find('.note');
						if (note.length == 0) {
							note = $('<div class="note text-danger col-sm-offset-4 col-sm-8"></div>');
							that.parent().parent().append(note);
						}
						note.html(d.error).show();
					}
				} else {
					that.attr('bad', "1");
					that.removeClass('good').addClass('bad');
					var note = that.parent().parent().find('.note');
					if (note.length == 0) {
						note = $('<div class="note text-danger col-sm-offset-4 col-sm-8"></div>');
						that.parent().parent().append(note);
					}
					note.html(d.message).show();
				}
			});
}
	
</script>
#end
#parse('/user/foot.html')
